.user-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #F6F6F6;

  .user-body {
    padding: 0 32rpx;
    margin-top: 20rpx;
  }

  .section-item {
    padding: 28rpx;
    background: #FFFFFF;
    border-radius: 20rpx;

    .menu-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 32rpx;
      gap: 36rpx 46rpx;

      .menu-item {
        display: flex;
        flex-flow: column;
        align-items: center;

        .menu-icon {
          width: 60rpx;
          height: 60rpx;
        }

        .menu-title {
          height: 40rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          line-height: 40rpx;
          margin-top: 8rpx;
        }
      }
    }

    .nav-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        height: 38rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 38rpx;
      }

      .arrow {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .section-body {
      width: 100%;
      display: flex;
      gap: 24rpx;
      margin-top: 34rpx;

      .item {
        padding: 0 26rpx;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 112rpx;
        //background:#DEF5E6;
        background-color: #72DC96;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        box-sizing: border-box;
        opacity: .7;
        overflow: hidden;
        position: relative;

        .bottom-right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 98rpx;
          height: 85rpx;
          //background: linear-gradient(180deg, rgba(239, 161, 109, 0.7) 15%, #ED7B2F 100%);
          //opacity: 0.15;
          z-index: 3;

          image {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            //z-index: 3;
          }
        }

        .item-title {
          height: 48rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.9);
          line-height: 48rpx;
          white-space: nowrap;
        }

        .count-num {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          margin-left: auto;

          .gay-chevron {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .user-money {
    padding: 0 32rpx;
    margin-top: -24rpx;

    .container {
      height: 160rpx;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      padding: 24rpx 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .right-btn {
        width: 192rpx;
        height: 64rpx;
        background: #389E4F;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
        padding: 12rpx 40rpx;
        text-align: center;
        box-sizing: border-box;
        z-index: 2;
        line-height: 1;

        .btn {
          font-size: 28rpx;
          font-weight: 500;
          color: #FFFFFF;
        }
      }

      .left {
        height: 100%;
        display: flex;
        flex-flow: column;
        z-index: 2;

        .title {
          height: 44rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #257938;;
          line-height: 44rpx;
        }

        .value {
          margin-top: 22rpx;
          font-size: 32rpx;
          font-weight: 600;
          color: #257938;
          line-height: 28rpx;
        }
      }

      .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        z-index: 1;
      }
    }


  }

  .header {
    width: 100%;
    height: 466rpx;
    box-sizing: border-box;
    padding-top: var(--height);
    //background: #F2EDDC;

    .mask {
      width: 100%;
      height: 466rpx;
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
    }

    .ad-container {
      left: 64rpx;
      right: 64rpx;
      background: linear-gradient(270deg, #2D2D27 0%, #55554F 100%);
      margin: 0 auto;
      border-radius: 18rpx 18rpx 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 32rpx 20rpx;
      position: absolute;
      bottom: 24rpx;

      .ad-title {
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 44rpx;
      }

      .ad-btn {
        padding: 8rpx 40rpx;
        line-height: 1;
        background: #DDCCAE;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn {
          font-size: 28rpx;
          font-weight: 500;
          color: #252522;
        }
      }
    }

    .navbar {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0 18rpx;

      .text {
        height: 50rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: #000000;
        line-height: 50rpx;
      }

      .notice {
        width: 38rpx;
        height: 38rpx;
      }
    }

    .user-info {
      display: flex;
      align-items: center;
      padding: 24rpx 32rpx;

      .chevron {
        width: 48rpx;
        height: 48rpx;
      }

      .info {
        margin-left: 28rpx;
        display: flex;
        flex-flow: column;
        flex: 1;

        .number {
          height: 40rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #000000;
          line-height: 40rpx;
          -webkit-background-clip: text;
        }

        .name-wrap {
          display: flex;
          align-items: center;

          .name-wrap-inner{
            height: 56rpx;
            .name {
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 56rpx;
              font-size: 40rpx;
              font-weight: bold;
              color: #000000;
              line-height: 56rpx;
              box-sizing: border-box;
            }
          }

          .vip-wrap {
            width: 50rpx;
            height: 26rpx;
            background: #C5996A;
            border-radius: 200rpx 200rpx 200rpx 200rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 18rpx;

            .vip {
              width: 32rpx;
              height: 32rpx;
            }
          }

        }
      }

      .avatar-wrap {
        width: 112rpx;
        height: 112rpx;
        font-size: 0;
        border-radius: 50%;
        overflow: hidden;

        .avatar {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
